<template>
	<view class="container">
		<view class="top-box"
			style="background: url('https://qiniu.dadaozhixing.top/dxx/header-bg.png'); height: 420rpx; padding-top: 88rpx">
			<view class="mp-choose-address"
				style="padding-left: 24rpx; height: 88rpx; display: flex; align-items: center" @click="chooseAddress">
				<img src="/static/tab1/location.png" alt="" style="width: 32rpx; height: 32rpx" />
				<span style="font-size: 32rpx; color: white; line-height: 48rpx">请选择地址</span>
				<img src="/static/tab1/arror_right.png" alt="" style="width: 32rpx; height: 32rpx" />
			</view>

			<view class="mp-search-box" style="height: 88rpx" @click="navToGoodsList">
				<uni-search-bar radius="20" cancelButton="none" 
					placeholder="请输入商品名称"></uni-search-bar>
			</view>
			<!-- 头部轮播 -->
			<view class="carousel-section" v-if="false">
				<!-- 背景色区域 -->
				<view class="titleNview-background" :style="{ backgroundColor: titleNViewBackground }"></view>
				<swiper class="carousel" circular @change="swiperChange">
					<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item"
						@click="navToDetailPage({ title: '轮播广告' })">
						<image :src="item.src" />
					</swiper-item>
				</swiper>
				<!-- 自定义swiper指示器 -->
				<view class="swiper-dots">
					<text class="num">{{ swiperCurrent + 1 }}</text>
					<text class="sign">/</text>
					<text class="num">{{ swiperLength }}</text>
				</view>
			</view>
		</view>

		<div class="main-container">
			<!-- 分类 -->
			<view class="cate-section">
				<view class="cate-item" v-for="(menu, mIdx) in menuList" :key="mIdx" @click="navToGoodsType(menu.id)">
					<image :src="menu.icon"></image>
					<text>{{ menu.name }}</text>
				</view>
			</view>
			<view class="newest-info" @click="navToPage('/pages/infomation/infomation')">
				<image src="https://qiniu.dadaozhixing.top/dxx/pages/index/notice.png"></image>
				<view class="text-box">
					<view style="font-size: 24rpx;">
						<span style="font-weight: 600;">【最新资讯】</span>
						<span>信息服务退换货政策</span>
					</view>
					<image src="https://qiniu.dadaozhixing.top/dxx/pages/index/arrow_right.png"></image>
				</view>
			</view>
			<view class="my-gift-card">
				<image src="/static/tab1/giftcard.png" style="width: 702upx; height: 160upx" mode="scaleToFill"
					@click="navToGiftCard"></image>
			</view>

			<div class="activity-tab-list">
				<div :class="atabIndex == activityTabIndex? 'activity-tab activity-tab-active': 'activity-tab activity-tab-default'" v-for="(aTab, atabIndex) in activityTabList" :key="atabIndex"
					@click="chooseActivityTab(atabIndex)"
				>
					<div class="tab-title">{{ aTab.title }}</div>
					<span class="tab-sub-title">{{ aTab.subTitle }}</span>
				</div>
			</div>

			<div id="goods-list-area">
				<div class="goods-list-item" v-for="(goods, gIdx) in goodsList" :key="gIdx">
					<div class="goods-item-img">
						<image :src="goods.icon" mode="aspectFill"></image>
					</div>
					<div class="goods-item-info">
						<div class="goods-item-name">{{ goods.name }}</div>
						<div class="goods-item-price">
							<view v-if="hasLogin">￥{{ goods.unitPrice }}</view>
							<view v-else style="width: 200upx;">登录查看价格</view>
							 <view>
								 <image class="add-to-cart"
								 	src="https://qiniu.dadaozhixing.top/dxx/pages/product/add_2_cart.png"
								 	></image>
							 </view>
						</div>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	import {
		typeListApi,goodsSizeCommendListApi
	} from "@/api/goods";
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				titleNViewBackground: "",
				swiperCurrent: 0,
				swiperLength: 0,
				carouselList: [],
				menuList: [],
				activityTabList: [{
						title: "新品推荐",
						subTitle: "平台上新"
					},
					{
						title: "每日精选",
						subTitle: "精品推荐"
					},
					{
						title: "捡漏专区",
						subTitle: "手慢则无"
					},
				],
				activityTabIndex: 0,
				activityTabNames: ["new","day","jianlou"],
				goodsList: [],
				searchGoodsName: '123123123'
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad() {
			// this.loadData();
		},
		onShow() {
			this.loadData()
			this.chooseActivityTab(this.activityTabIndex)
		},
		methods: {
			/**
			 * 请求静态数据只是为了代码不那么乱
			 * 分次请求未作整合
			 */
			async loadData() {
				let ret = await typeListApi({
					merId: 1,
					shopId: 1
				})
				this.menuList = ret.data
			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
				this.titleNViewBackground = this.carouselList[index].background;
			},
			//详情页
			navToDetailPage(item) {
				//测试数据没有写id，用title代替
				let id = item.title;
				uni.navigateTo({
					url: `/pages/product/product?id=${id}`,
				});
			},
			navToGiftCard() {
				uni.navigateTo({
					url: `/pages/giftcards/giftcards`,
				});
			},
			navToPage(path) {
				uni.navigateTo({
					url: path,
				});
			},
			navToGoodsType(typeId) {
				uni.setStorage({
					key: 'typeId',
					data: typeId,
					success: function() {
						console.log('success');
					}
				})
				uni.switchTab({
					url: `/pages/category/category`,
				});
			},
			navToGoodsList(name) {
				console.log(name);
				this.navToPage('/pages/product/list')
			},
			chooseAddress() {
				console.log('开始选择地址')
				uni.chooseAddress({
					success(res) {
						console.log(res.userName)
						console.log(res.postalCode)
						console.log(res.provinceName)
						console.log(res.cityName)
						console.log(res.countyName)
						console.log(res.detailInfo)
						console.log(res.nationalCode)
						console.log(res.telNumber)
					}
				})
			},
			async chooseActivityTab(cIdx) {
				this.activityTabIndex = cIdx
				let ret = await goodsSizeCommendListApi({
					type: "goods_size_comment",
					name: this.activityTabNames[cIdx]
				})
				if(ret && ret.code==200) {
					this.goodsList = ret.data
				}
			}
		},
		// #ifndef MP
		// 标题栏input搜索框点击
		onNavigationBarSearchInputClicked: async function(e) {
			this.$api.msg("点击了搜索框");
		},
		//点击导航栏 buttons 时触发
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.$api.msg("点击了扫描");
			} else if (index === 1) {
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index,
				});
				// #endif
			}
		},
		// #endif
	};
</script>

<style lang="scss">
	/* #ifdef MP */
	.mp-search-box {
		width: 100%;

		// padding: 0 80upx;
		.ser-input {
			flex: 1;
			height: 56upx;
			line-height: 56upx;
			text-align: center;
			font-size: 28upx;
			color: $font-color-base;
			border-radius: 20px;
			background: rgba(255, 255, 255, 0.6);
		}
	}

	page {
		.cate-section {
			border-radius: 16upx 16upx 0 0;
			margin-top: -20upx;
		}

		.carousel-section {
			padding: 0;

			.titleNview-placing {
				padding-top: 0;
				height: 0;
			}

			.carousel {
				.carousel-item {
					padding: 0;
				}
			}

			.swiper-dots {
				left: 45upx;
				bottom: 40upx;
			}
		}
	}

	/* #endif */

	page {
		background: #f5f5f5;
	}

	.m-t {
		margin-top: 16upx;
	}

	/* 头部 轮播图 */
	.carousel-section {
		padding-top: 10px;
		border: 2upx solid green;

		.titleNview-background {
			width: 100%;
			height: 426upx;
			transition: 0.4s;
		}
	}

	.carousel {
		width: 100%;
		height: 350upx;

		.carousel-item {
			width: 100%;
			height: 100%;
			padding: 0 28upx;
			overflow: hidden;
		}

		image {
			width: 100%;
			height: 100%;
			border-radius: 10upx;
		}
	}

	.swiper-dots {
		display: flex;
		left: 60upx;
		bottom: 15upx;
		width: 72upx;
		height: 36upx;
		background-image: url();
		background-size: 100% 100%;

		.num {
			width: 36upx;
			height: 36upx;
			border-radius: 50px;
			font-size: 24upx;
			color: #fff;
			text-align: center;
			line-height: 36upx;
		}

		.sign {
			top: 0;
			left: 50%;
			line-height: 36upx;
			font-size: 12upx;
			color: #fff;
			transform: translateX(-50%);
		}
	}

	/* 分类 */
	.cate-section {
		display: grid;
		grid-template-columns: repeat(5,20%);
		background: #fff;

		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: $font-sm + 2upx;
			margin: 12upx;
			padding: 20upx 0;
			color: #23242e;

			image {
				width: 112upx;
				height: 106upx;
				border-radius: 50%;
			}
		}
	}

	.ad-1 {
		width: 100%;
		height: 210upx;
		padding: 10upx 0;
		background: #fff;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.main-container {
		padding: 0 24rpx;
	}

	.activity-tab-list {
		display: flex;
		justify-content: space-around;

		.activity-tab {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 16upx;
			width: 218rpx;
			border-radius: 16rpx;

			.tab-title {
				width: 112rpx;
				height: 42rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				line-height: 42rpx;
				text-align: left;
				font-style: normal;
			}

			.tab-sub-title {
				width: 96rpx;
				height: 36rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				line-height: 36rpx;
				text-align: left;
				font-style: normal;
			}
		}
		.activity-tab-default{
			height: 107rpx;
			background: #ffffff;
			.tab-title {
				color: #23242e;
			}
			.tab-sub-title{
				color: #7f808a;
				opacity: .8;
			}
		}
		.activity-tab-active {
			height: 122rpx;
			background-image: url('https://qiniu.dadaozhixing.top/dxx/pages/index/item_choose.png');
			background-size: 100% 100%;
			.tab-title {
				color: white;
			}
			.tab-sub-title{
				color: white;
			}
		}
	}

	#goods-list-area {
		margin-top: 16upx;
		padding-bottom: 80upx;
		display: grid;
		grid-template-columns: repeat(2,340upx);
		grid-column-gap: 22upx;
		grid-row-gap: 24upx;
	}
	.test-box{
		display: flex;
	}
	.test-item{
		width: 300upx;
		height: 100upx;
		border: 1upx solid yellow;
	}

	.goods-list-item {
		width: 340upx;
		display: flex;
		flex-direction: column;
		background-color: white;
		border-radius: 16upx;

		.goods-item-img {
			height: 340upx;
			border-radius: 16rpx 16rpx 0rpx 0rpx;
			padding: 20upx;

			image {
				width: 300upx;
				height: 300upx;
			}
		}

		.goods-item-info {
			padding: 24upx;

			.goods-item-name {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 28rpx;
				color: #23242e;
				line-height: 42rpx;
				text-align: left;
				font-style: normal;
			}
			.goods-item-price{
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				font-weight: 600;
				font-size: 28upx;
				color: #3EB3F3;
				line-height: 42rpx;
				font-style: normal;
				.add-to-cart {
					width: 36upx;
					height: 36upx;
				}
			}
		}
	}

	.newest-info {
		display: flex;
		margin: 24rpx 0;
		background-color: rgba(227, 243, 252, 1.000000);
		border-radius: 16rpx;
		border: 1px 3, 3 rgba(62, 179, 243, 1);
		padding-right: 23rpx;

		image {
			width: 68rpx;
			height: 68rpx;
		}

		.text-box {
			flex: 3;
			display: flex;
			line-height: 68rpx;
			image {
				width: 24rpx;
			    height: 24rpx;
			    margin: 22rpx 0 22rpx 216rpx;
			}
		}
	}
</style>